<template>
  <s-form ref="form" :value="formValue" style="width: 100%; height: 100%" body-style="height:100%">
    <s-tabs default-active="1" type="card" class="property-content">
      <a-tab-pane key="0" :force-render="true" tab="通用">
        <general-property
          :code="code"
          :value="value"
          :key-options="keyOptions"
          @typeChange="
            (val) => {
              $emit('typeChange', val)
            }
          "
        />
      </a-tab-pane>
      <a-tab-pane key="1" :force-render="true" tab="组件">
        <s-scroll>
          <s-form-item
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="禁止输入"
            name="disabled"
            :rules="[{ whitespace: true, required: true, message: '不能为空' }]"
          >
            <s-radio
              v-model="formValue.disabled"
              :data="[
                { label: '否', value: '0' },
                { label: '是', value: '1' }
              ]"
            />
          </s-form-item>
          <s-form-item
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="显示标题"
            name="displayTitle"
          >
            <s-switch v-model="formValue.displayTitle" check-value="1" un-chceck-value="0">
            </s-switch>
          </s-form-item>
          <s-form-item
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="标题冒号"
            name="colon"
          >
            <s-switch v-model="formValue.colon" check-value="1" un-chceck-value="0"> </s-switch>
          </s-form-item>
          <s-form-item
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="尺寸"
            name="size"
            :rules="[{ whitespace: true, required: true, message: '不能为空' }]"
          >
            <s-select
              v-model="formValue.size"
              :data="[
                { label: '大(弹窗)', value: 'big' },
                { label: '中(弹窗)', value: 'middle' },
                { label: '小(弹窗)', value: 'small' },
                { label: '大', value: 'list-big' },
                { label: '中', value: 'list-middle' },
                { label: '小', value: 'list-small' },
                { label: '自定义', value: 'custom' }
              ]"
            />
          </s-form-item>
          <s-form-item
            v-if="formValue.size == 'custom'"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="整体宽度"
            name="totalWidth"
            :rules="[{ required: true, message: '不能为空' }]"
          >
            <s-input-number v-model="formValue.totalWidth" :max="24" :min="0" />
          </s-form-item>
          <s-form-item
            v-if="formValue.size == 'custom'"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="内容宽度"
            name="wrapperWidth"
            :rules="[{ required: true, message: '不能为空' }]"
          >
            <s-input-number v-model="formValue.wrapperWidth" :max="24" :min="0" />
          </s-form-item>
          <s-form-item
            v-if="formValue.size == 'custom'"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="文本宽度"
            name="labelWidth"
            :rules="[{ required: true, message: '不能为空' }]"
          >
            <s-input-number v-model="formValue.labelWidth" :max="24" :min="0" />
          </s-form-item>
          <s-form-item
            v-if="formValue.size == 'custom'"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="间隔宽度"
            name="offsetWidth"
            :rules="[{ required: true, message: '不能为空' }]"
          >
            <s-input-number v-model="formValue.offsetWidth" :max="24" :min="0" />
          </s-form-item>
          <s-form-item
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="可清除"
            name="allowClear"
            :rules="[{ whitespace: true, required: true, message: '不能为空' }]"
          >
            <s-radio
              v-model="formValue.allowClear"
              :data="[
                { label: '是', value: '1' },
                { label: '否', value: '0' }
              ]"
            />
          </s-form-item>
          <s-form-item
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="提示语"
            name="placeholder"
            :rules="[{ max: 50, message: '最长为50' }]"
          >
            <s-input v-model="formValue.placeholder" placeholder="填写的提示语" />
          </s-form-item>
          <s-form-item
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="填写说明"
            name="tip"
            :rules="[{ max: 500, message: '最长为500' }]"
          >
            <s-input v-model="formValue.tip" placeholder="填写说明" />
          </s-form-item>
          <s-form-item
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="数据类型"
            name="dictType"
            :rules="[{ whitespace: true, required: true, message: '不能为空' }]"
          >
            <s-radio
              v-model="formValue.dictType"
              :data="[
                { label: '字典库', value: '1' },
                { label: '远程', value: '2' }
              ]"
            />
          </s-form-item>
          <s-form-item
            v-if="formValue.dictType == '1'"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="字典"
            name="dictCode"
            :rules="[{ whitespace: true, required: true, message: '字典不能为空' }]"
          >
            <s-select
              v-model="formValue.dictCode"
              show-search
              url="/data/tree/group/groups"
              placeholder="请选择字典"
            />
          </s-form-item>
          <s-form-item
            v-if="formValue.dictType == '2'"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            tip='接口响应示例:{ code:"000000" , data: [ {label:"男",value:"1"},{label:"女",value:"2"} ]}'
            label="接口地址"
            name="dictUrl"
            :rules="[{ whitespace: true, required: true, message: '接口地址不能为空' }]"
          >
            <s-input v-model="formValue.dictUrl" placeholder="接口地址" />
          </s-form-item>
          <s-form-item
            v-if="formValue.dictType == '2'"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="名称键"
            name="dictLabelKey"
            :rules="[{ whitespace: true, required: true, message: '名称键不能为空' }]"
          >
            <s-input v-model="formValue.dictLabelKey" placeholder="名称字段在接口中key" />
          </s-form-item>
          <s-form-item
            v-if="formValue.dictType == '2'"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="值键"
            name="dictValueKey"
            :rules="[{ whitespace: true, required: true, message: '值键不能为空' }]"
          >
            <s-input v-model="formValue.dictValueKey" placeholder="值字段在接口中key" />
          </s-form-item>
          <s-form-item
            v-if="formValue.dictType == '2'"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="id键"
            name="dictIdKey"
            :rules="[{ whitespace: true, required: true, message: 'id键不能为空' }]"
          >
            <s-input v-model="formValue.dictIdKey" placeholder="id字段在接口中key" />
          </s-form-item>
          <s-form-item
            v-if="formValue.dictType == '2'"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            label="父键"
            name="dictParentIdKey"
            :rules="[{ whitespace: true, required: true, message: '父键不能为空' }]"
          >
            <s-input v-model="formValue.dictParentIdKey" placeholder="parentId字段在接口中key" />
          </s-form-item>
        </s-scroll>
      </a-tab-pane>
      <a-tab-pane key="2" :force-render="true" tab="校验">
        <s-form-item
          size="custom"
          :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
          label="必填"
          name="required"
          :rules="[{ whitespace: true, required: true, message: '不能为空' }]"
        >
          <s-radio
            v-model="formValue.required"
            :data="[
              { label: '是', value: '1' },
              { label: '否', value: '0' }
            ]"
          />
        </s-form-item>
      </a-tab-pane>
    </s-tabs>
  </s-form>
</template>
<script>
import GeneralProperty from './GeneralProperty.vue'
export default {
  name: 'SelectTreeProperty',
  components: { GeneralProperty },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    keyOptions: {
      required: false,
      type: Array,
      default: () => []
    },
    value: {
      required: false,
      type: Object,
      default: () => {}
    },
    code: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  emits: ['typeChange'],
  data() {
    return { formValue: this.value.properties, active: '1' }
  },
  watch: {
    value: {
      handler: function (val, oldVal) {
        this.formValue = val.properties
      },
      deep: true
    }
  },
  methods: {
    save(callback) {
      const form = this.$refs.form
      form.validate(
        (values) => {
          callback({
            id: this.value.id,
            type: this.value.type,
            properties: values,
            attrs: {},
            extendAttrs: {}
          })
        },
        (obj) => {}
      )
    }
  }
}
</script>
